<template>
  <div id="communityHealth" class="person-detail">
    <div>
      <van-nav-bar title="社区医疗" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="communityHealth-body">
      <div class="communityHealth-img">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in banner" :key="index">
            <van-image :src="image.imageUrl" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in publicServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1.3rem" heightH="1.3rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div>
        <p class="communityHealth-more">
          <span>健康资讯</span>
          <span @click="
              $router.push({ path: '/work/communityHealth/healthInformation' })
            ">更多</span>
        </p>
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in healthDetais" :key="index" class="communityHealth-list" @click="
              $router.push({
                path: '/work/communityHealth/healthInformationDetails',
                query:{
                    id:item.id
                }
              })
            ">
              <van-image :src="item.headImage" />
              <div class="communityHealth-list-details">
                <p>
                  {{ item.subject }}
                </p>
                <span>{{ item.creationDate }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "communcommunityHealthityDoctor",
    components: {},
    data() {
      return {
        banner: [],
        publicServiceList: [{
            icon: "社区医生",
            path: "/work/communityHealth/communityDoctor",
            text: "社区医生"
          },
          {
            icon: "我要咨询",
            path: "/work/communityHealth/toConsultation",
            text: "我要咨询"
          },
          {
            icon: "就诊档案menu",
            path: "/work/communityHealth/visitFile",
            text: "就诊档案"
          },
          {
            icon: "社区药房",
            path: "/work/communityHealth/communityPharmacy",
            text: "社区药房"
          }
        ],
        healthDetais: [],
        count: 1,
        loading: false,
        finished: false,
        isLoading: false,
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getBanner();
    },
    methods: {
      onRefresh() {
        this.healthDetais = []
        this.count = 1;
        this.getInfo();
      },
      onLoad() {
        this.getInfo();
      },
      getBanner() {
        let data = {
          curPage: 1,
          pageSize: 4
        };
        mine.medicalBanner_v1_list_frontEnd(data).then(res => {
          if (res.code == "0") {
            this.banner = res.datas.records;
          } else {
            this.$toast(res.msg);
          }
        });
      },
      getInfo() {
        let data = {
          curPage: this.count,
          pageSize: (this.count) * 4
        };
        mine.healthInfo_v1_latest_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.healthDetais = [...this.healthDetais, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 4) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      integralClick(val) {
        //this.$toast('正在开发中,敬请期待。。。')
        this.$router.push({
          path: val.path
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #communityHealth {
    background: #fff;

    p {
      margin: 5px 0;
    }

    .communityHealth-body {
      padding: 20px;
    }

    .communityHealth-img {
      height: 150px;

      .van-image {
        width: 100%;
        height: 150px;
      }
    }

    .communityHealth-more {
      >span:nth-child(1) {
        font-weight: bold;
        font-size: 18px;
      }

      >span:nth-child(2) {
        float: right;
        font-weight: 300;
      }
    }

    .communityHealth-list {
      display: flex;
      margin-top: 10px;
      flex-direction: row-reverse;
      border-bottom: 1px solid #e2e2e2;
      padding: 5px 0;

      >.van-image {
        width: 100px;
        height: 100px;
      }
    }

    .communityHealth-list-details {
      margin-left: 10px;
      width: 65%;

      >p {
        height: 70px;
      }

      >p:nth-child(1) {
        font-size: 14px;
        font-weight: 500;
      }

      >p:nth-child(2) {
        font-size: 12px;
        opacity: 0.4;
      }
    }
  }
</style>